<template>
  <view>
    <cu-card margin="15rpx 0">
      <!-- 用户信息 -->
      <view class="infoBox">
        <view class="flex flex-items-center">
          <uv-avatar
            v-if="itemData.user.anonymous == 1 && isAny"
            size="70rpx"
            text="匿"
            bg-color="#00754a"
            
          ></uv-avatar>
          <uv-avatar :src="itemData.user.headPortrait" size="70rpx" v-else></uv-avatar>
          <p class="name">{{itemData.user.anonymous == 1 && isAny ? '匿名用户' :itemData.user.nickname }}</p>
        </view>
        <p v-if="showDel" class="flex" @click="onDelete">
          <uv-icon name="trash" color="#00754a"></uv-icon>
          <uv-text color="#00754a" size="27rpx" text="删除"></uv-text>
        </p>
        <p class="time" v-else>{{ itemData.adviceTime }}</p>
      </view>

      <!-- 标签 -->
      <view class="tagBox flex flex-wrap" v-if="tagList.length">
        <view class="tag" v-for="(item, index) in tagList" :key="index">
          <uv-tags
            :text="item"
            borderColor="#00754A"
            color="#00754b"
            size="mini"
            plain
          ></uv-tags>
        </view>
      </view>

      <!-- 评论内容 -->
      <view style="margin: 5rpx">
        <p class="con" :class="showStatus ? 'act' : ''">
          {{ itemData.content || "未知" }}
        </p>
        <uv-text
          v-if="showAll"
          :color="showStatus ? '#00754A' : '#969799'"
          :text="showStatus ? '展开' : '收起'"
          @click="showStatus = !showStatus"
          size="27rpx"
          lineHeight="42rpx"
        ></uv-text>
      </view>

      <!-- 评论图片 -->
      <view class="AlbumBox" v-if="imgList.length">       
        <cu-Album :list="imgList"></cu-Album>
      </view>

      <!-- 点赞区域 -->
      <view class="flex flex-justify-end" v-if="showLike">
        <view style="display: inline-block" @click="onLike">
          <uv-text
            :color="itemData.attent ? '#00754a' : '#323233'"
            size="27rpx"
            :text="itemData.attent ? '已点赞' : '点赞'"
          ></uv-text>
        </view>
        <uv-icon
          @click="onLike"
          name="tworow4"
          custom-prefix="custom-icon"
          :color="itemData.attent ? '#00754a' : '#323233'"
          size="31rpx"
        ></uv-icon>
      </view>
    </cu-card>
  </view>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store";
const userStore = useUserStore();

const props = defineProps({
  itemData: {
    type: Object,
    default: {},
  },
  itemIdx: {
    type: Number,
  },
  lineNum: {
    type: Number,
    default: 3,
  },
  showLike: {
    type: Boolean,
    default: true,
  },
  showDel: {
    type: Boolean,
    default: false,
  },
  // 是否不区分匿名
  isAny:{
    type: Boolean,
    default: true,
  }
});
const emits = defineEmits(["changelike", "unLike"]);
// 标签列表
const tagList = computed(() => {
  return props.itemData.targ.split(",").filter((item) => item);
});
// 图片列表
const imgList = computed(() => {
  return props.itemData.picture
    ? props.itemData.picture.split(",").filter((item) => item)
    : [];
});

// 全文、收起是否展示
const showAll = ref(false);
const showStatus = ref(false);

const onLike = () => {
  emits("changelike", props.itemIdx);
};

const onDelete = () => {
  emits("unLike", props.itemIdx);
};

const getHeight = () => {
  const instance = getCurrentInstance();
  const query = uni.createSelectorQuery().in(instance);
  query
    .select(".con")
    .boundingClientRect((data) => {
      if (data.height > props.lineNum * uni.upx2px(42)) {
        showAll.value = true;
        showStatus.value = true;
      }
    })
    .exec();
};

onMounted(() => {
  getHeight();
});
</script>

<style lang="scss" scoped>
.tag {
  margin: 5rpx !important;
}

.infoBox {
  width: 100%;
  justify-content: space-between;
  align-items: center;
  display: flex;
  margin-bottom: 15rpx;
  .imgBox {
    width: 70rpx;
    height: 70rpx;
    background: #e6e5e5;
    border-radius: 50%;
  }
  .name {
    font-weight: 600;
    font-size: 31rpx;
    color: #111111;
    line-height: 46rpx;
    padding-left: 15rpx;
  }
  .time {
    font-weight: 400;
    font-size: 25rpx;
    color: #969799;
    line-height: 38rpx;
  }
}
.con {
  width: 100%;
  font-weight: 400;
  font-size: 27rpx;
  color: #000000;
  line-height: 42rpx;
}

.act {
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.AlbumBox {
  width: 100%;
}
</style>
